<template>
  <div class="flex-column">
    <div class="head">
      <section class="search-section">
        <el-input placeholder="输入关键字..." v-model.trim="keyWord" class="input-with-select"> </el-input>
        <el-button v-if="$verifyPerms('dataDicAddBtn')" class="div-btn" icon="el-icon-circle-plus-outline" style="color: #fff; background-color: #000" @click="clickDicList"></el-button>
        <el-button class="search-btn" icon="el-icon-zoom-in" style="color: #fff; background-color: #000" @click="listDictionary"></el-button>
      </section>
    </div>

    <div class="content" v-if="dataDicLists.length">
      <div v-for="item in dataDicLists" :key="item.primaryKey" class="gross" @click="toDetails(item.primaryKey)">
        <div class="content-title">
          <h2>{{ item.dataName }}</h2>
          <div>
            <el-button @click.stop="editItem(item)" type="text" size="small" v-if="$verifyPerms('dataDicEditBtn')">编辑</el-button>
            <el-button @click.stop="deleteItem(item)" type="text" size="small" v-if="$verifyPerms('dataDicDeleteBtn')">删除</el-button>
          </div>
        </div>

        <p v-html="item.dataDefinition"></p>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" v-if="dialogVisible" @close="cancel" :close-on-click-modal="false">
      <el-form :model="show.model" :rules="show.rules" ref="form" label-width="100px" size="small" label-position="right">
        <el-row>
          <el-col :span="24">
            <el-form-item label="数据名称" prop="dataName">
              <el-input v-model="show.model.dataName" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关联数据">
              <el-input type="textarea" :rows="3" v-model="show.model.relationDataKey" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="适用范围">
              <el-input type="textarea" :rows="3" v-model="show.model.applyRange" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据定义" prop="dataDefinition">
              <el-input type="textarea" :rows="3" v-model="show.model.dataDefinition" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="计算公式">
              <el-input type="textarea" :rows="3" v-model="show.model.formula" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="示例">
              <el-input type="textarea" :rows="3" v-model="show.model.example" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" :justify="'center'">
        <el-button @click="cancel" round>取 消</el-button>
        <el-button @click="preservation" round>保 存</el-button>
      </el-row>
    </el-dialog>

    <dic-details ref="info"></dic-details>
  </div>
</template>

<script>
  import { listRelationDictionary, listDictionary, detailDictionary, dictionaryOperate } from '../../api/dataDic';
  import { formValid } from '@/lib/utils';
  import dicDetails from './details.vue';

  export default {
    name: 'dataDictionary-index',
    data() {
      return {
        title: '',
        dialogVisible: false,
        keyWord: '',
        dataDicLists: [],
        show: {
          model: {
            dataName: null,
            relationDataKey: null,
            applyRange: null,
            dataDefinition: null,
            formula: null,
            example: null,
          },
          rules: {
            dataName: [{ required: true, message: '请输入', trigger: 'blur' }],
            dataDefinition: [{ required: true, message: '请输入', trigger: 'blur' }],
          },
        },
        AssociatedData: [],
      };
    },
    methods: {
      async getdataDicList() {
        const { rows } = await listRelationDictionary({});
        this.AssociatedData = rows;
      },
      async listDictionary() {
        const { rows } = await listDictionary({ keyWord: this.keyWord });
        this.dataDicLists = rows;
        this.dataDicLists.forEach(item => {
          if (item.dataDefinition) {
            item.dataDefinition = item.dataDefinition.replace(/\n/g, '<br/>');
            item.dataDefinition = item.dataDefinition.replace(/\t/g, '&emsp;');
          }
        });
      },
      toDetails(key) {
        // this.$router.push({
        //   path: '/dataDic/details',
        //   query: {
        //     id: key,
        //   },
        // });
        this.$refs.info.getDataDicDetail(key)
      },
      clickDicList() {
        this.dialogVisible = true;
        this.title = '新建';
        this.getdataDicList();
      },
      cancel() {
        this.dialogVisible = false;
        this.show.model = {
          dataName: null,
          relationDataKey: null,
          applyRange: null,
          dataDefinition: null,
          formula: null,
          example: null,
        };
      },
      preservation() {
        formValid(this, 'form', this.saveFn);
      },
      async saveFn() {
        let formData = Object.assign({}, this.show.model);
        if (this.show.model.primaryKey) {
          formData.action = 'update';
          const res = await dictionaryOperate(formData);
        } else {
          formData.action = 'create';
          const res = await dictionaryOperate(formData);
        }
        this.$message.success('保存成功');
        this.listDictionary();
        this.dialogVisible = false;
        this.show.model = {
          dataName: null,
          relationDataKey: null,
          applyRange: null,
          dataDefinition: null,
          formula: null,
          example: null,
        };
      },
      async editItem(item) {
        await this.getdataDicList();
        this.title = '编辑';
        this.dialogVisible = true;
        const res = await detailDictionary({ primaryKey: item.primaryKey });
        this.show.model = {
          ...res,
          dataName: res.dataName,
          relationDataKey: res.relationDataKey,
          applyRange: res.applyRange,
          dataDefinition: res.dataDefinition,
          formula: res.formula,
          example: res.example,
        };
      },
      deleteItem(item) {
        this.$confirm('你确认要进行删除么?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            let params = {
              primaryKey: item.primaryKey,
              action: 'delete',
            };
            await dictionaryOperate(params);
            // 更新数据
            this.listDictionary();
            // 删除操作成功
            this.$message.success('删除操作成功');
          })
          .catch(error => {
            // this.$message.error(error);
          });
      },
    },
    mounted() {
      this.keyWord = this.$route.query.keyWord || '';
      this.listDictionary();
    },
    components: { dicDetails },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    .el-dialog__header {
      background: #444444;
    }
  }
  ::v-deep .el-button.is-round {
    background-color: #444444;
    color: #fff;
  }
  ::v-deep .el-button--text {
    color: #444444;
  }
  .search-section {
    position: relative;
    margin-bottom: 20px;
    .div-btn {
      position: absolute;
      right: -87px;
      top: 4px;
      width: 86px;
      height: 52px;
      background: #444444;
      border-radius: 26px;
      font-size: 26px;
    }
    .search-btn {
      position: absolute;
      right: 4px;
      top: 4px;
      width: 86px;
      height: 52px;
      background: #444444;
      border-radius: 26px;
      font-size: 26px;
    }
  }

  .input-with-select {
    ::v-deep input {
      width: 1000px;
      height: 60px;
      background: #ffffff;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);
      border-radius: 30px;
      font-size: 18px;
      padding: 0 80px 0 30px;
    }
  }

  .flex-column {
    background-color: #ffffff;
    padding-top: 50px;
    height: 100%;
    align-items: center;

    .head {
      width: 1000px;
      .list {
        margin-top: 50px;
        justify-content: center;
        align-items: center;
        width: 100%;

        span {
          display: block;
          width: 1px;
          height: 30px;
          background: #cccccc;
        }
        .data {
          flex: 1;
          text-align: center;

          p {
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            line-height: 26px;
          }

          h2 {
            height: 40px;
            font-size: 28px;
            font-weight: 600;
            line-height: 40px;
          }
        }
      }
    }

    .content {
      width: 1200px;
      margin-top: 30px;
      h2 {
        height: 33px;
        font-size: 24px;
        font-weight: 600;
        color: #333333;
        line-height: 33px;
        margin-bottom: 10px;
      }
      p {
        font-size: 14px;
        color: #666666;
        line-height: 20px;
      }
      .content-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .gross {
        margin-top: 10px;
        padding: 27px 30px 20px;
        display: block;
        background: #fbfbfb;
        cursor: pointer;
        &:hover {
          background: #f2f2f2;
        }
      }
    }
  }
</style>
